<template>
  <ZZDialog class="settings" title="视图视角" @close="callbackClose()">
    <div class="mt-4">
      <el-input v-model="bookmark_name" placeholder="输入视角名字" class="input-with-select">
        <template #append>
          <el-button type="primary" @click="addbookmark()" plai>添加</el-button>
        </template>
      </el-input>
    </div>

    <el-table
      :data="tableData"
      row-key="name"
      style="width: 100%; height: 660px"
      highlight-current-row
      @row-dblclick="handleCurrentChange"
    >
      <el-table-column prop="id" label="id" v-if="false" />
      <el-table-column fixed prop="name" label="名称" sortable>
        <template #default="scope">
          <el-image style="width: 190px; height: 100px" :src="scope.row.icon" />
          <br />
          <span class="demonstration">{{ scope.row.name }}</span>
          <el-button link type="primary" size="small" @click="delClick(scope.row.id)">
            <i class="fa fa-trash" title="删除"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </ZZDialog>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue';
import { useViewer } from '@/stores/viewer';
import ZZDialog from '@/common/ZZDialog.vue';
import { LocalStorageUser } from '@/utils/localStorage';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElLoading } from 'element-plus';
let viewer: any; //场景视图
const cookieName = 'zzgis_bookmark';
const bookmark_name = ref('');
const tableData = ref([{ name: '', id: 1, data: '', icon: '' }]);
onBeforeMount(() => {
  viewer = useViewer().viewer;
});
onMounted(() => {
  getbookmark();
});

const handleCurrentChange = function (val: any | undefined) {
  if (val) {
    let bounds = val.data;
    if (typeof bounds === 'string') {
      bounds = JSON.parse(val.data);
    }
    viewer.zz.centerAt(bounds, { isWgs84: true });
  }
};
const delClick = function (id: number) {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  })
    .then(() => {
      for (let index = tableData.value.length - 1; index >= 0; index--) {
        if (tableData.value[index]?.id == id) {
          tableData.value.splice(index, 1);
          const lastcookie = JSON.stringify(tableData.value);
          LocalStorageUser.add(cookieName, lastcookie);
          break;
        }
      }
      ElMessage({
        type: 'success',
        message: '删除成功'
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败'
      });
    });
};

const getbookmark = () => {
  const atcookie = LocalStorageUser.get(cookieName); //读取localStorage值
  if (atcookie != null) tableData.value = eval(atcookie);
  else tableData.value.length = 0;
};

const hasName = function (name: string) {
  let has = false;
  for (let index = tableData.value.length - 1; index >= 0; index--) {
    if (tableData.value[index]?.name == name) {
      has = true;
      break;
    }
  }
  return has;
};
const addbookmark = function () {
  if (bookmark_name.value == '') {
    ElMessageBox.alert('请输入名称', '提示', {
      confirmButtonText: '确认'
    });
    return;
  }
  if (hasName(bookmark_name.value)) {
    ElMessage.error('名称已存在！');
    return;
  }
  const bookmark = zz3d.point.getCameraView(viewer, true);
  const loading = ElLoading.service({
    lock: true,
    text: '请等待，正在截屏！',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  viewer.zz.expImage({
    download: false,
    width: 300, //指定 高  或 宽
    calback: function (base64: any) {
      //回调
      const temp = {
        name: bookmark_name.value,
        data: JSON.stringify(bookmark),
        icon: base64,
        id: new Date().getTime()
      };
      tableData.value.push(temp);
      const lastcookie = JSON.stringify(tableData.value);
      LocalStorageUser.add(cookieName, lastcookie);
      loading.close();
      ElMessage.success('添加成功！');
    }
  });
};

const callbackClose = function () {};
</script>
<style scoped lang="less">
.settings {
  position: absolute;
  top: 100px;
  right: 200px;
  width: 220px;
  height: 720px;
}

.demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style>
